<div *ngIf="user"
     class="main">
    <div class="left">
        <form #f="ngForm"
              (submit)="save()"
              nz-form
              nzLayout="vertical"
              se-container="1">
            <se error="请输入您的邮箱!"
                label="邮箱">
                <input [(ngModel)]="user.email"
                       name="email"
                       nz-input
                       required
                       type="email"/>
            </se>
            <se error="请输入您的昵称!"
                label="昵称">
                <input [(ngModel)]="user.nickName"
                       name="name"
                       nz-input
                       required/>
            </se>
            <se label="手机号">
                <input [(ngModel)]="user.phone"
                       name="phone"
                       nz-input
                       placeholder="输入手机号">
            </se>

            <se label="生日">
                <nz-date-picker
                        [(ngModel)]="user.birthday"
                        [nzMode]="'day'"
                        [nzPlaceHolder]="'选择生日'"
                        name="birthday"></nz-date-picker>
            </se>
            <se>
                <button [disabled]="f.invalid" nz-button nzType="primary">更新基本信息</button>
            </se>
        </form>
    </div>
    <div class="right">
        <div class="avatar_title">头像</div>
        <div class="avatar"><img alt="Avatar"
                                 src="{{ user.imageUrl }}"/></div>
        <nz-upload [nzShowUploadList]="false"
                   nzAction="/user/avatar">
            <button class="button_view"
                    nz-button>
                <i nz-icon
                   nzType="upload"></i>
                <span>更换头像</span>
            </button>
        </nz-upload>
    </div>
</div>
